import React, { Component } from 'react'
import {Table, Button, Layout, Input, Dialog, Message} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import DatePicker from '../base/DatePicker'
import Pagination from '../base/Pagination'
import Select from '../base/Select'
import {SearchPanel} from '../base/BaseStatic'
// import styled from 'styled-components'

class refundList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      // 表格数据
      columns: [
        { label: '会员ID', prop: 'userId', /* width: 180 */ },
        { label: '会员名', prop: 'userName', /* width: 180 */ },
        { label: '订单号', prop: 'orderId' },
        { label: '申请类型', prop: 'applyType' },
        { label: '退款金额', prop: 'applicationAmount' },
        { label: '退款时间', prop: 'returnTime' },
        { label: '审核人', prop: 'handlerName' },
        { label: '审核状态', prop: 'statusStr' },
        { label: '操作', prop: 'operate', width: 220, render: (item) => {
          return (
            <span>
              <Button type="info" size="small">查看</Button>
              {
                item.status === 'returned_money' ? <Button className="btn-operate-gray" size="small">编辑</Button> : <Button type="info" size="small" onClick={this.edit.bind(this, item)}>编辑</Button>
              }
              <Button type="info" size="small" onClick={() => { this.props.history.push({ pathname: `/operatingRecord/${item.id}` }) }}>记录</Button>
            </span>
          )
        } }
      ],
      tableData: [
        { userId: '123', userName: '123', orderId: '12', applyType: '245', applicationAmount: 111, returnTime: '2018-11-11 00:00:00', applicationDescribe: '23532', handlerName: '436', statusStr: 'returning_money' },
        { userId: '123', userName: '123', orderId: '12', applyType: '245', applicationAmount: 111, returnTime: '2018-11-11 00:00:00', applicationDescribe: '23532', handlerName: '436', statusStr: 'returned_money' }
      ],
      // 申请类型选项
      applyTypeOptions: [
        {
          value: 0,
          label: '仅退款'
        },
        {
          value: 'return_good_and_money',
          label: '退货退款'
        }
      ],
      // 审核状态选项
      reviewStatusOptions: [
        {
          value: 'wait_return_money',
          label: '待退款'
        },
        {
          value: 'returning_money',
          label: '退款中'
        },
        {
          value: 'returned_money',
          label: '已退款'
        }
      ],
      userID: null, // 会员ID
      startReturnTime: null, // 时间选择器
      endReturnTime: null, // 时间选择器
      orderId: null, // 订单号
      applicationDescribe: null, // 申请类型
      status: null, // 审核状态
      handlerName: null, // 审核人
      dialogVisible: false, // 对话框
      pageNo: 0,
      totalElements: 50, // 总页数
      currentItem: null //编辑时候选中的当前行
    }
  }
  componentDidMount () {
    this.selectAfterSell({pageReq: {pageNo: 0, pageSize: 10}})
  }
  selectAfterSell (data) {
    this.$ajax.selectAfterSell(data).then(res => {
      if (res.code === 200) {
        res.data.content.map(a => {
          if (a.status === 'returned_money') {
            a.statusStr = '已退款'
          } else if (a.status === 'returning_money') {
            a.statusStr = '退款中'
          } else {
            a.statusStr = '待退款'
          }
          if (a.applicationDescribe === 'return_good_and_money') {
            a.applyType = '退货退款'
          } else if (a.applicationDescribe === 'return_money') {
            a.applyType = '换货'
          }
          return a
        })
        this.setState({totalElements: res.data.totalElements, tableData: res.data.content})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  render () {
    return (
      <div>
        <Breadcrumb data={['售后', '退款管理']}/>
        {/* 搜索面板 */}
        <SearchPanel>
          <Layout.Row>
            <Layout.Col span="3" className="text"><div>会员ID：</div></Layout.Col>
            <Layout.Col span="5"><Input onChange={this.getUserID.bind(this)} placeholder={'请输入会员ID'} /></Layout.Col>
            <Layout.Col span="3" className="text"><div>申请时间：</div></Layout.Col>
            <Layout.Col span="13">
              <DatePicker getTime={this.getTime.bind(this)}/>
            </Layout.Col>
          </Layout.Row>
          <Layout.Row>
            <Layout.Col span="3" className="text"><div>订单号：</div></Layout.Col>
            <Layout.Col span="5"><Input onChange={this.getOrderID.bind(this)} placeholder={'请输入订单号'} /></Layout.Col>
            <Layout.Col span="3" className="text"><div>申请类型：</div></Layout.Col>
            <Layout.Col span="5"><Select options={this.state.applyTypeOptions} select={this.getApplyType.bind(this)}/></Layout.Col>
            <Layout.Col span="8"></Layout.Col>
          </Layout.Row>
          <Layout.Row>
            <Layout.Col span="3" className="text"><div>审核人：</div></Layout.Col>
            <Layout.Col span="5"><Input onChange={this.getReviewer.bind(this)} placeholder={'请输入审核人'} /></Layout.Col>
            <Layout.Col span="3" className="text"><div>审核状态：</div></Layout.Col>
            <Layout.Col span="5"><Select options={this.state.reviewStatusOptions} select={this.getReviewStatus.bind(this)}/></Layout.Col>
            <Layout.Col span="8"></Layout.Col>
          </Layout.Row>
          <Button type="primary" onClick={this.search.bind(this)} >搜索</Button>
        </SearchPanel>
        {/* 表格 */}
        <Table
          style={{width: '100%'}}
          columns={this.state.columns}
          data={this.state.tableData}
          border={true}
          highlightCurrentRow={true}
        />
        {/* 分页 */}
        <Pagination total={this.state.totalElements} changePage={val => {this.changePage(val)}}/>
        {/* 确认认领对话框 */}
        <Dialog
          title="提示"
          size="tiny"
          visible={ this.state.dialogVisible }
          onCancel={ () => this.setState({ dialogVisible: false }) }
          lockScroll={ false }
          >
          <Dialog.Body>
            <span>确认修改？</span>
          </Dialog.Body>
          <Dialog.Footer className="dialog-footer">
            <Button onClick={ () => this.setState({ dialogVisible: false }) }>取消</Button>
            <Button type="primary" onClick={ this.sureEdit.bind(this) }>确定</Button>
          </Dialog.Footer>
        </Dialog>
      </div>
    )
  }
  // 会员ID的getter
  getUserID (val) { this.setState({ userID: val }) }
  // 时间选择器getter
  getTime (begin, end) { this.setState({ startReturnTime: begin, endReturnTime: end }) }
  // 订单号的getter
  getOrderID (val) { this.setState({ orderId: val }) }
  // 申请类型的getter
  getApplyType (val) { this.setState({ applicationDescribe: val }) }
  // 审核状态的getter
  getReviewStatus (val) { this.setState({ status: val }) }
  // 审核人的getter
  getReviewer (val) { this.setState({ handlerName: val }) }
  // 搜索回调
  search () {
    let {applicationDescribe, startReturnTime, endReturnTime, handlerName, orderId, status, userId} = this.state
    let data = {applicationDescribe, startReturnTime, endReturnTime, handlerName, orderId, status, userId}
    this.selectAfterSell(Object.assign({}, data, {pageReq: {pageNo: 0, pageSize: 10}}))
  }
  // 编辑回调
  edit (item) {
    if (item.status === 'returning_money') {
      // 状态为退款中可以跳转到编辑页面
      this.props.history.push(`/refundEdit/${item.handlerId}`)
      window.sessionStorage.setItem('refundItem', JSON.stringify(item))
    } else {
      this.setState({ dialogVisible: true, currentItem: item })
    }
  }
  sureEdit () {
    let item = this.state.currentItem
    let data = {
      "handleInfo": "return_money",
      "handlerId": 12,
      "handlerName": '12'
    }
    this.$ajax.claimRefund(item.id, data).then(res => {
      if (res.code === 200) {
        Message({
          type: 'success',
          message: '修改成功'
        })
        this.setState({ dialogVisible: false })
        this.selectAfterSell({pageReq: {pageNo: 0, pageSize: 10}})
      } else {
        Message.error('修改失败')
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // 换页
  changePage (val) {
    this.setState({pageNo: Number(val) - 1}, () => {
      this.selectAfterSell({pageReq: {pageNo: this.state.pageNo, pageSize: 10}})
    })
  }
}
export default withRouter(refundList)